<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student</title>
    <link rel="stylesheet" type="text/css" href="/static/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/materialdesignicons.min.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="w-100 h-100 d-flex justify-content-center align-items-center">

    <div class="text-center">
        <s-dialog>
            <s-button slot="trigger"> 点 我</s-button>
            <div slot="headline"> Thank ThinkPHP8.0</div>
            <div slot="text">
                睁眼间TP框架也更新到了第八个版本，今天去使用了一下，初期创建存在一些问题，这里记录一下，然后再根 PHP
                、ThinkPHP
                说声再见了。
            </div>
            <s-button slot="action" type="text">取消</s-button>
            <s-button slot="action" type="text">确定</s-button>
        </s-dialog>
        <s-table id="studentTable" class="mt-1">
            <s-thead>
                <s-tr>
                    <s-th>#</s-th>
                    <s-th>ID</s-th>
                    <s-th>姓名</s-th>
                    <s-th>性别</s-th>
                    <s-th>生日</s-th>
                    <s-th>院系</s-th>
                    <s-th>地址</s-th>
                </s-tr>
            </s-thead>
            <s-tbody>

            </s-tbody>
        </s-table>
    </div>
    <table id="tb_departments"></table>
</div>
</body>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/sober.min.js"></script>
<script>
    $(document).ready(function () {
        // AJAX 请求获取学生数据
        $.ajax({
            url: 'getAllStudent',
            method: 'GET',
            success: function (response) {
                console.log(response)
                response = JSON.parse(response);
                if (response.code === 200) {
                    var students = response.data;
                    var tbody = $('#studentTable s-tbody');
                    // 清空现有的表格内容
                    tbody.empty();
                    // 遍历学生数据并生成表格行
                    students.forEach(function (student) {
                        var row = `
                                <s-tr>
                                    <s-td><s-checkbox></s-checkbox></s-td>
                                    <s-td>${student.id}</s-td>
                                    <s-td>${student.name}</s-td>
                                    <s-td>${student.sex}</s-td>
                                    <s-td>${student.birth}</s-td>
                                    <s-td>${student.department}</s-td>
                                    <s-td>${student.address}</s-td>
                                </s-tr>
                            `;
                        tbody.append(row);
                    });
                } else {
                    alert('请求失败：' + response.msg);
                }
            },
            error: function (xhr, status, error) {
                console.error('请求错误：', status, error);
                alert('请求错误，请稍后重试。');
            }
        });
    });
</script>
</html>